import {View, Text, StyleSheet, TouchableOpacity, Animated,} from 'react-native'
import React, {Component} from 'react'
import styles, {HUNDRED_PERCENT} from "../../style";
import Value = Animated.Value;

interface TabViewProps {
    tabLabelArr: Array<{
        name: string
    }>,
}

interface TabViewState {
    currentPageIndex: number,
    separatorOpacity: Array<Value>

}


export default class TabView extends Component<TabViewProps, TabViewState> {


    constructor(props: TabViewProps) {

        super(props);
        const currentPageIndex = 0;
        this.state = {
            currentPageIndex,
            separatorOpacity: props.tabLabelArr.map((tab, index) => {
                const opacity = currentPageIndex === index ? 1 : 0;
                return new Animated.Value(opacity)
            })
        }
    }

    changePage = (currentPageIndex: number): () => void => {
        return () => {
            Animated.parallel(this.state.separatorOpacity.map((separatorOpacity, separatorIndex) => {
                const opacity = separatorIndex === currentPageIndex ? 1 : 0;
                return Animated.timing(separatorOpacity, {toValue: opacity, duration: 100})
            })).start(() => {
                this.setState(() => ({currentPageIndex}));
            });

        }
    };

    renderHeader() {
        const {tabLabelArr} = this.props;
        const {currentPageIndex, separatorOpacity} = this.state;
        const AnimateView = Animated.View;
        return (
            <View style={[styles.flexDirectionRowNotFlex, styles.centerV, {height: 40}]}>
                {
                    tabLabelArr.map((tab: { name: string }, index: number) => {
                        const currentColor = currentPageIndex === index ? "#629C36" : "#666666";
                        const currentSeparatorColor = currentPageIndex === index ? "#629C36" : null;
                        return (
                            <View style={styles.flex} key={tab.name}>
                                <TouchableOpacity onPress={this.changePage(index)} key={tab.name}
                                                  style={[styles.flex, styles.centered]}>
                                    <Text style={{color: currentColor, fontSize: 14}}>{tab.name}</Text>
                                </TouchableOpacity>
                                <AnimateView
                                    style={[styles.absoluteFull, {
                                        backgroundColor: currentSeparatorColor,
                                        height: 2,
                                        marginHorizontal: 50,
                                        top: null,
                                        opacity: separatorOpacity[index]
                                    }]}/>
                            </View>
                        )
                    })
                }
            </View>)
    }

    renderContent() {

        const {children = []} = this.props;
        const {currentPageIndex} = this.state;
        return (
            <View style={{paddingTop:5,width:HUNDRED_PERCENT}}>
                {
                    children[currentPageIndex]
                }
            </View>
        )
    }

    render() {
        return (<View style={style.container}>
            {this.renderHeader()}
            {this.renderContent()}

        </View>)
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

 